<!--RECEBE o título da controller TipoDespesa -->
<h1><?php echo $this->titulo; ?></h1>

<!-- formulário -->
<!--aqui indica qual o metodo da controller ele vai utilizar que no caso é o salvar -->
<form id="formTipoDespesa" action="/tipo-despesa/salvar" method="post" enctype="multipart/form-data">
    
    <div class="formfield">
        <label for="">Descrição:</label>
        <!-- A class required é utilizada para que o input não seja salvo com valor nulo o value é o valor que vc manda na view -->
        <input class="required" id="descricao" name="descricao" type="text" size="30" maxlength="45" value="<?php echo $this->tipoDespesa['descricao']; ?>"/>
        <!-- esse input esta com o type hidden para que o usuario não possa ver o id -->
        <input class="" id="id_tipodespesa" name="id_tipodespesa" type="hidden" value="<?php echo $this->tipoDespesa['id_tipodespesa']; ?>"/>
    </div>

    <div class="formbutton">
        <input id="btEnviar" type="submit" value="Enviar" />
        <button type="button" id="btVoltarTipoDespesa">Voltar</button> 
    </div>
</form>

<div id="sucessoTipoDespesa">
    <p>Sucesso</p>
</div>


<script>

    $(function(){
        //Melhora aparência dos botões
        $( "input[type=submit], button" ).button();
        //deixa o dialog sem abrir
        //que no caso seria as msg de erro e sucesso so aparece quando é feito algo 
        $( "#sucessoTipoDespesa" ).dialog({
            autoOpen: false
        });       
               
        
        //onde faz o trabalho de validar 
        //o #formTipoDespesa ele pega pelo id do form
        $('#formTipoDespesa').validate({
            submitHandler: function(form){
                jQuery(form).ajaxSubmit({
                    dataType:  'json', 
                    success: function(r){
                        //aqui ele compara o json retornado pelo metodo salvar
                        if(r.tipo == 'sucesso'){
                            //escreve a msg 
                            $('#sucessoTipoDespesa p').html(r.msg);
                            //habilita o dialog
                            $('#sucessoTipoDespesa').dialog("open");
                            //trata o dialog
                            $( "#sucessoTipoDespesa" ).dialog({
                                modal: true,
                                buttons: {
                                    Ok: function() {
                                        $(this).dialog("close");
                                        window.location = r.url;
                                    }
                                }
                            });
                            
                            //$('#divMsg').html(r.msg)
                            //window.location = r.url;
                        } else {
                            //aqui é o mesmo caso do if acima só que ele mostra a outra mensagem
                            $('#sucessoTipoDespesa p').html(r.msg);
                            $('#sucessoTipoDespesa').dialog("open");
                            $( "#sucessoTipoDespesa" ).dialog({
                                modal: true,
                                buttons: {
                                    Ok: function() {
                                        $(this).dialog("close");
                                        window.location = r.url;
                                    }
                                }
                                
                            });
                        }
          
                    } 
                });
            }
        });
        
        $('#btVoltarTipoDespesa').click(function(){
            $('#ui-tabs-9').load('/tipo-despesa/index/menu/1');
        })
        
    });
</script>